<div ng-controller="AnnotationsEditorCtrl" ng-init="init()">

	<div class="dashboard-editor-header">
		<div class="dashboard-editor-title">
			<i class="icon icon-bolt"></i>
			Annotations
		</div>

		<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
			<div ng-repeat="tab in ['Overview', 'Add', 'Edit']"
				 data-title="{{tab}}">
			</div>
		</div>

	</div>

	<div class="dashboard-editor-body">
		<div class="editor-row row" ng-if="editor.index == 0">
			<div class="span6">
				<div ng-if="annotations.length === 0">
					<em>No annotations defined</em>
				</div>
				<table class="grafana-options-table">
					<tr ng-repeat="annotation in annotations">
						<td style="width:90%">
							<i class="icon-bolt"></i> &nbsp;
							{{annotation.name}}
						</td>
						<td style="width: 1%">
							<a ng-click="edit(annotation)"
							   class="btn btn-success btn-mini">
								<i class="icon-edit"></i>
								Edit
							</a>
						</td>
						<td style="width: 1%"><i
								ng-click="_.move(annotations,$index,$index-1)"
								ng-hide="$first"
								class="pointer icon-arrow-up"></i></td>
						<td style="width: 1%"><i
								ng-click="_.move(annotations,$index,$index+1)"
								ng-hide="$last"
								class="pointer icon-arrow-down"></i></td>
						<td style="width: 1%">
							<a ng-click="removeAnnotation(annotation)"
							   class="btn btn-danger btn-mini">
								<i class="icon-remove"></i>
							</a>
						</td>
					</tr>
				</table>
			</div>
		</div>

		<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
			<div class="editor-row">
				<div class="editor-option">
					<label class="small">Name</label>
					<input type="text" class="input-medium"
						   ng-model='currentAnnotation.name'
						   placeholder="name"></input>
				</div>
				<div class="editor-option">
					<label class="small">Datasource</label>
					<select ng-model="currentAnnotation.datasource"
							ng-options="f.name as f.name for f in datasources"
							ng-change="datasourceChanged()"></select>
				</div>
				<div class="editor-option">
					<label class="small">Icon color</label>
					<spectrum-picker
							ng-model="currentAnnotation.iconColor"></spectrum-picker>
				</div>
				<div class="editor-option">
					<label class="small">Icon size</label>
					<select class="input-mini"
							ng-model="currentAnnotation.iconSize"
							ng-options="f for f in [7,8,9,10,13,15,17,20,25,30]"></select>
				</div>
				<editor-opt-bool text="Grid line"
								 model="currentAnnotation.showLine"></editor-opt-bool>
				<div class="editor-option">
					<label class="small">Line color</label>
					<spectrum-picker
							ng-model="currentAnnotation.lineColor"></spectrum-picker>
				</div>
			</div>

			<div ng-include src="currentDatasource.editorSrc">
			</div>

		</div>
	</div>

	<div class="dashboard-editor-footer">
		<button ng-show="editor.index === 1" type="button"
				class="btn btn-success" ng-click="add()">Add
		</button>
		<button ng-show="editor.index === 2" type="button"
				class="btn btn-success pull-left" ng-click="update();">Update
		</button>
		<button type="button" class="btn btn-success pull-right"
				ng-click="close_edit();dismiss();dashboard.refresh();">Close
		</button>
	</div>
</div>
